.el-button {
  color: var(--color-text-regular);
  background-color: var(--color-background);
  border-color: var(--color-border-light);
  @extend %themed;

  &:focus,
  &:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light-9);
    border-color: var(--color-primary-light-7);
  }
}

.el-button--primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);

  &:focus,
  &:hover {
    color: #fff;
    background-color: var(--color-primary-light-1);
    border-color: var(--color-primary-light-3);
  }
}

.el-button--text {
  color: var(--color-primary);
  background: transparent;
  border-color: transparent;

  &:focus,
  &:hover {
    color: var(--color-primary);
    background: transparent;
    border-color: transparent;
  }
}
